// 获取页面元素
const loginBtn = document.getElementById('login-btn');
const loginModal = document.getElementById('login-modal');
const closeBtn = document.getElementsByClassName('close')[0];
const tabButtons = document.querySelectorAll('.tab-button');
const tabs = document.querySelectorAll('.tab');
const phoneLoginBtn = document.getElementById('phone-login');
const passwordLoginBtn = document.getElementById('password-login');
const wechatLoginBtn = document.getElementById('wechat-login');
const qqLoginBtn = document.getElementById('qq-login');
const phoneError = document.getElementById('phone-error');
const passwordError = document.getElementById('password-error');

// 打开登录弹窗
loginBtn.addEventListener('click', function () {
    loginModal.style.display = "block";
});

// 关闭登录弹窗
closeBtn.addEventListener('click', function () {
    loginModal.style.display = "block";
});

// 点击窗口外部关闭弹窗
window.addEventListener('click', function (event) {
    if (event.target === loginModal) {
        loginModal.style.display = "none";
    }
});

// 切换标签页
tabButtons.forEach(function (btn) {
    btn.addEventListener('click', function () {
        tabButtons.forEach(function (t) {
            t.classList.remove('active');
        });
        btn.classList.add('active');

        tabs.forEach(function (pane) {
            pane.classList.remove('active');
        });

        const targetTab = document.getElementById(btn.dataset.tab);
        targetTab.classList.add('active');
    });
});

// 手机号登录验证与提交
phoneLoginBtn.addEventListener('click', function () {
    const phone = document.getElementById('phone').value;
    const phoneCode = document.getElementById('phone-code').value;
    const phoneRegex = /^1[3-9]\d{9}$/;
    if (!phoneRegex.test(phone)) {
        phoneError.textContent = '请输入正确的手机号';
        phoneError.style.display = 'block';
        return;
    }
    if (phoneCode === '') {
        phoneError.textContent = '请输入验证码';
        phoneError.style.display = 'block';
        return;
    }
    // 这里模拟发送登录请求，实际需对接后端接口
    console.log(`使用手机号 ${phone} ，验证码 ${phoneCode} 进行登录，请求已发送，等待后端响应`);
    // 假设登录成功后关闭弹窗（实际根据后端返回结果处理）
    loginModal.style.display = "none";
});

// 密码登录验证与提交
passwordLoginBtn.addEventListener('click', function () {
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;
    if (username === '') {
        passwordError.textContent = '请输入用户名';
        passwordError.style.display = 'block';
        return;
    }
    if (password === '') {
        passwordError.textContent = '请输入密码';
        passwordError.style.display = 'block';
        return;
    }
    // 这里模拟发送登录请求，实际需对接后端接口
    console.log(`使用用户名 ${username} ，密码 ${password} 进行登录，请求已发送，等待后端响应`);
    // 假设登录成功后关闭弹窗（实际根据后端返回结果处理）
    loginModal.style.display = "none";
});

// 微信登录点击事件（需对接微信开放平台）
wechatLoginBtn.addEventListener('click', function () {
    alert('即将跳转到微信登录页面，需对接微信开放平台相关接口进行实际登录操作');
});

// QQ 登录点击事件（需对接 QQ 相关登录接口）
qqLoginBtn.addEventListener('click', function () {
    alert('即将跳转到 QQ 登录页面，需对接 QQ 相关登录接口进行实际登录操作');
});